<template>
  <div class="app-container">
    <el-row style="">
      <el-col :span="12">
        <el-button type="success" @click="addlist" plain>新增</el-button>
      </el-col>
      <el-col :span="11">
        <el-input
          @blur="sousuoclick"
          v-model="inputsousuo"
          placeholder="请输入内容"
          class="input-with-select"
        >
          <el-button
            @click="sousuoclick"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
      border
      style="width: 100%; margin:15px 0"
      :height="height"
      :data="list"
    >
      <el-table-column fixed type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="title" label="题目" width="170"> </el-table-column>
      <el-table-column prop="type" label="分类" width="220"> </el-table-column>
      <el-table-column prop="name" label="作者" width="150"> </el-table-column>
      <el-table-column prop="date" label="时间" width="140" sortable>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small" @click="bianjiclick(scope.row)"
            >编辑</el-button
          >
          <el-button @click="particulars(scope.row)" type="text" size="small"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-drawer
      size="80%"
      title="我是外面的 Drawer"
      :visible.sync="drawer"
      :with-header="false"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="type">
            <el-select v-model="form.cid" placeholder="请选择类别">
              <el-option
                v-for="(item, index) in classify"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选项">
            <el-row
              style="margin-top:10px;"
              v-for="(item, index) in options"
              :key="index"
            >
              <el-col :span="2">
                <el-checkbox
                  v-model="item.checked"
                  :disabled="flag"
                ></el-checkbox>
                {{ item.index }}
              </el-col>
              <el-col :span="17">
                <el-input
                  type="textarea"
                  class="one-content"
                  v-model="item.value"
                  :disabled="flag"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-button
                  style="margin-left:4px;margin-top:11px;"
                  v-if="index == options.length - 1"
                  type="success"
                  icon="el-icon-plus"
                  circle
                  @click="jiaxuanxiang(index)"
                  :disabled="flag"
                ></el-button>
                <el-button
                  style="margin-left:4px;margin-top:11px;"
                  v-if="index == options.length - 1 && index > 3"
                  type="warning"
                  icon="el-icon-minus"
                  circle
                  @click="jianxuanxiang(index)"
                  :disabled="flag"
                ></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="答案">{{ xuanxiangarr }}</el-form-item>
          <el-form-item label="答案提示">
            <el-input v-model="form.tips"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="disabled" @click="addlists" type="primary"
              >确定</el-button
            >
            <el-button @click="countermand">取消</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      drawertitle: "新增",
      form: {},
      disabled: false,
      flag: false,
      options: [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false }
      ],
      height: "50vh",
      xuanxiangarr: [],
      inputsousuo: ""
    };
  },
  watch: {
    options: {
      deep: true,
      handler: function(newQuestion, oldQuestion) {
        this.xuanxiangarr = [];
        newQuestion.map((value, index) => {
          this.options[index]["index"] = String.fromCharCode(index + 65);
          value.checked && this.xuanxiangarr.push(value.index);
        });
      }
    }
  },
  methods: {
    ...mapActions("exam", ["getexam", "addexams", "delexam"]),
    ...mapMutations("exam", ["GET_CURRENTPAGE", "GET_PAGESIZE"]),
    jianxuanxiang(index) {
      this.options.splice(index, 1);
    },
    jiaxuanxiang(index) {
      this.options.push({
        index: String.fromCharCode(index + 66),
        value: "",
        checked: false
      });
    },
    //搜索
    sousuoclick() {
      this.getexam(this.inputsousuo);
      // for (let a =0;a<this.list.length;a++) {
      //   // this.list[a].options = JSON.parse(this.list[a].options)
      //   console.log(a)
      //   console.log(this.list[a].options)
      //   console.log(JSON.parse(this.list[a].options))
      // }
    },
    //编辑
    bianjiclick(row) {
      this.disabled = false;
      this.flag = false;
      this.drawer = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.xuanxiangarr = JSON.parse(row.answers);
      this.options = JSON.parse(row.options);
    },
    //取消
    countermand() {
      this.drawer = false;
      this.form = {};
      this.options = [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false }
      ];
      this.xuanxiangarr = [];
    },
    //查看
    particulars(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.xuanxiangarr = JSON.parse(row.answers);
      this.options = JSON.parse(row.options);
      this.disabled = true;
      this.flag = true;
      this.drawer = true;
    },
    //删除
    handleClick(row) {
      this.$confirm("确认删除吗？")
        .then(async () => {
          await this.delexam(row.id);
          await this.getexam();
        })
        .catch(_ => {});
    },
    //分页
    async handleSizeChange(val) {
      await this.GET_PAGESIZE(val);
      await this.getexam();
    },
    async handleCurrentChange(val) {
      await this.GET_CURRENTPAGE(val);
      await this.getexam();
    },
    //新增按钮
    addlist() {
      this.disabled = false;
      this.flag = false;
      this.drawer = true;
      this.form = {};
      this.options = [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false }
      ];
      this.xuanxiangarr = [];
    },
    //关闭遮罩层
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //确定按钮
    async addlists() {
      this.form.options = JSON.stringify(this.options);
      this.form.answers = JSON.stringify(this.xuanxiangarr);
      this.form.uid = 1;
      await this.addexams(this.form);
      await this.getexam();
      this.drawer = false;
    }
  },
  mounted() {
    this.getexam();
    this.$store.dispatch("msbd/getmsbddata"); //获取classify
  },
  computed: {
    ...mapState("exam", ["list", "pageSize", "total", "currentpage"]),
    ...mapState("msbd", ["classify"])
  }
};
</script>

<style scoped></style>
